<template>
  <div class="page" style="padding-bottom: 100px;padding-top: 50px;border: none;">
    <div class="fix-top weui-flex v-mdl bd-b-light pdh" style="height: 50px;">
      <div class="weui-flex__item">全选</div>
      <div class="weui-flex__item ta-r">
        <cbx @tap="isCheckAll = !isCheckAll" :checked="isSelectedAll"></cbx>
      </div>
    </div>

    <div v-for="(n, i) in members" :key="i" class="weui-cells weui-cells_after-title mgb-s v-mdl item-progress">
      <div class="weui-cell weui-cell_access" hover-class="weui-cell_active" @tap="toggleCheck(i)">
        <div class="weui-cell__hd">
          <div style="width: 40px;">
            <avatar v-if="n.avatarUrl" :src="n.avatarUrl"></avatar>
          </div>
        </div>
        <div class="weui-cell__bd pdl">
          {{n.nickName}}
        </div>
        <div class="weui-cell__ft">
          <cbx :checked="n.checked" ></cbx>
        </div>
      </div>
    </div>
    <div class="fix-bottom bg-white">
      <button class="ui btn primary no-rounder no-border" :class="{'disabled': !isCheckOk}" @tap="onCheckOk">完成选择</button>
    </div>
    <page-common></page-common>
  </div>
</template>

<script>
import Avatar from '@/components/avatar'
import PageCommon from '@/components/page-common'
import Cbx from '@/components/cbx'
import { mapGetters, mapActions } from 'vuex'
import base from '@/mixins/base'
export default {
  mixins: [base],
  data () {
    return {
      isCheckAll: false,
      pageTaskId: 0
    }
  },
  components: {
    PageCommon,
    Avatar,
    Cbx
  },
  computed: {
    ...mapGetters('member', [
      'members'
    ]),
    isCheckOk () {
      for (var i = 0; i < this.members.length; i++) {
        let n = this.members[i]
        if (n.checked === true) {
          return true
        }
      }
      return false
    },
    isSelectedAll () {
      let count = 0
      this.members.forEach(n => {
        if (n.checked) count++
      })
      return count === this.members.length
    }
  },
  methods: {
    async onPageShow () {
      try {
        let {taskId} = this.getParams()
        if (taskId !== this.pageTaskId) {
          this.pageTaskId = taskId
          await this.getSubmitedsByTaskId(taskId)
        }
      } catch (e) {
        this.$debug({err: e})
      }
    },
    ...mapActions('task', [
      'fetchById'
    ]),
    ...mapActions('member', [
      'getSubmitedsByTaskId',
      'toggleCheck',
      'setCheckAll',
    ]),
    onCheckOk () {
      if (!this.isCheckOk) return
      let {taskId} = this.getParams()
      wx.navigateTo({
        url: '/pages/batch-reply/main?taskId=' + taskId
      })
    }
  },
  watch: {
    isCheckAll (nv) {
      this.setCheckAll(nv)
    },
  }
}
</script>

<style scoped lang="less">
</style>
